<template>
  <el-container>
    <el-header style="margin-top: 40px;">
      <el-row>
        <el-col :span="1">
          <el-button @click="operate = 'create'; dialog.operate.display = true" type="primary" icon="el-icon-plus">添加</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-table
        v-loading="page.loading"
        :data="table.data"
        empty-text="暂无数据"
        style="width: 100%">
        <el-table-column
          sortable
          prop="id"
          label="编号">
        </el-table-column>
        <el-table-column
          sortable
          prop="name"
          label="名称">
        </el-table-column>
        <el-table-column
          prop="permissions"
          label="权限ID列表">
          <template slot-scope="scope">
            {{scope.row.permissions | listFilter }}
          </template>
        </el-table-column>
        <el-table-column
          prop="button"
          label="操作">
          <template slot-scope="scope">
            <el-button-group>
              <el-button @click="update(scope.row)" type="primary" icon="el-icon-edit"></el-button>
              <el-button @click="remove(scope.row)" type="primary" icon="el-icon-delete"></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @current-change="load"
        layout="prev, pager, next"
        :total="table.total"
        :page-size="table.size"
        :current-page="table.page">
      </el-pagination>
    </el-main>
    <el-dialog
      :close-on-click-modal="false"
      :title="operate === 'update'? '修改角色' : '添加角色'"
      :visible.sync="dialog.operate.display"
      width="30%">
      <span>
        <el-form label-position="top" :model="role" ref="role">
          <el-form-item label="名称" prop="name" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
            <el-input v-model="role.name"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="introduction" :rules="[{ required: true, message: '请输入描述', trigger: 'blur' }]">
            <el-input v-model="role.introduction"></el-input>
          </el-form-item>
          <el-form-item label="权限" prop="permissions" :rules="[{ required: true, message: '请选择权限', trigger: 'change' }]">
            <el-checkbox-group v-model="role.permissions">
              <el-checkbox v-for="(item, index) in permissions" :key="index" :label="item.id">
                {{ item.introduction }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.operate.display = false">取 消</el-button>
        <el-button type="primary" v-if="operate === 'update'" @click="update_">确 定</el-button>
        <el-button type="primary" v-if="operate === 'create'" @click="create">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import { page, permissions, create, remove, update } from '@/api/role'
export default {
  name: "UserRole",
  data () {
    return {
      table: {
        data: null,
        page: 1,
        size: 10,
        total: null
      },
      page: {
        query: '',
        loading: true
      },
      dialog: {
        operate: {
          display: false
        }
      },
      role: {
        id: null,
        name: '',
        introduction: '',
        permissions: []
      },
      permissions: [],
      operate: null
    }
  },
  filters: {
    listFilter (value) {
      return value.join(',')
    }
  },
  methods: {
    create () {
      this.operate = 'create'
      this.$refs['role'].validate((valid) => {
        if (valid) {
          create(this.role).then( res => {
            this.role = {
              name: '',
              introduction: '',
              permissions: []
            }
            this.dialog.create.display = false;
            this.load()
          })
        }
      });
    },
    remove (row) {
      this.$confirm('您是否确认删除该角色', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(row.id).then( res => {
          this.load()
        })
      })
    },
    update (row) {
      this.operate = 'update'
      this.role = JSON.parse(JSON.stringify(row))
      this.dialog.operate.display = true;
    },
    update_ () {
      this.$refs['role'].validate((valid) => {
        if (valid) {
          update(this.role).then( res => {
            this.role = {
              name: '',
              introduction: '',
              permissions: []
            }
            this.dialog.operate.display = false;
            this.load()
          })
        }
      });
    },
    load (_page) {
      this.page.loading = true
      let _current = 1
      if (_page === undefined)
        _current = this.table.page;
      else
        _current = _page
      page({ page: _current, size: this.table.size }).then( res => {
        this.table.data = []
        this.table.data = res.data.list
        this.table.total = res.data.count
        this.page.loading = false
      }).catch( err => {
        console.log(err)
        this.page.loading = false
      })
    }
  },
  mounted() {
    permissions().then( res => {
      this.permissions = res.data.list
    })
    this.load()
  }
}
</script>

<style scoped>

</style>
